<include file="Index/_meta" />
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=l1x9LZBNSek5LNfrerbVEN99SGYg1a5r"></script> -->
<script src="__PUBLIC__/js/jquery.bigautocomplete.js"></script>
<link rel="stylesheet" href="__PUBLIC__/css/jquery.bigautocomplete.css" type="text/css" />
<script type="text/javascript">
$(function(){
    $("#tt").bigAutocomplete({
        width:915,
        url:'__MODULE__/Charts/soumodel',
        // data:[{title:"中国好声音",result:{ff:"qq"}},
        //     {title:"中国地图"}],
        callback:function(data){
            // alert(data.title);    
        }
    });
})
</script>
<body>  
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.demo{width:100%;display: flex;justify-content: center;padding-top: 50px;padding-bottom: 50px;}
/*.demo h2{font-size:16px;color:#3366cc;height:30px;}*/
.demo li{float:left;}
.text{width:900px;height:32px;padding:4px 7px;padding:6px 7px 2px\9;font:16px arial;border:1px solid #c6c6c6;border-radius:2px;vertical-align:top;outline:none;margin:0 5px 0 0;}
.button{width:140px;height:42px;padding:0;padding-top:2px\9;border:0;background-position:0 -35px;background-color:#3398DB;color:white;border-radius: 4px;font-size: 18px; cursor:pointer}
</style>   
<div class="right">
    <div class="mg40">
        <div class="demo">
            <!-- <h2>bigautocomplete联想输入测试</h2> -->
            <form action="" method="post" name="searchform" id="searchform" class="searchinfo">
                <ul>
                    <li><input type="text" id="tt" value="" class="text" placeholder="请输入要跳转的功能名称" /></li>
                    <li><button type="button" id="chagongneng" class="button">搜索</button> <!-- <button class="layui-btn btn-primary" type="button" id="chagongneng"  style="margin-left: 5px;" lay-submit="" lay-filter="chagongneng">搜索</button> -->
                    </li>
                </ul>
            </form>
        </div>
        <div class="shequjc">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="bingtu_left">
                        <img src="__PUBLIC__/images/shequtu.png" width="100%">
                        <!-- <div class="shequditu"></div>  -->
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="bingtu_right">
                        <h1 style="text-align: center;font-size: 30px;">{$data.name}基本信息统计</h1>        
                        <div class="layui-row">
                            <div class="layui-col-md2">&nbsp;</div>
                            <div class="layui-col-md4">
                                <ul>
                                    <li>
                                        <div class="linejg">区域类型:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">{$data.area_type}</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">总人数:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">{$data.zongrenshu}人</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">男女比例:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">{$data.sex_bili}:100</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">总建筑面积:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">{$data.zjzmj}km²</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">大型超市:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">{$data.daxingchaoshi}个</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">在职人员百分比:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">{$data.zzzb}%</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="linejg">各类车辆总和:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">{$data.chezonghe}辆</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">各类中小型超市:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">{$data.zxcs}个</p>
                                            </div>
                                        </div>
                                    </li>
                                    
                                </ul>
                            </div>
                            <div class="layui-col-md1">&nbsp;</div>
                            <div class="layui-col-md4">
                                <ul>
                                    <li>
                                        <div class="linejg">建成时间:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">{$data.jcsj}</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">常住人口:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">{$data.czrk}人</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">总面积:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">{$data.zongmianji}km²</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">房屋:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">{$data.fwsl}</p>
                                            </div>
                                        </div>
                                    </li> 
                                    <li>
                                        <div class="linejg">重点人口:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">{$data.zdrk}人</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="linejg">医院:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">{$data.yiyuan}家</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="linejg">学校:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">{$data.xuexiao}个</p>
                                            </div>
                                        </div>
                                    </li>  
                                    <li>
                                        <div class="linejg">组成:
                                            <div class="jibenxx">
                                                <p class="sq_jbxxtj">{$data.zucheng}</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="layui-col-md1">&nbsp;</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>  
        <div class="rkzhubiao">
            <div id="zhexian" style="height: 100%;display: flex;justify-content: center;"></div>
        </div>  
        <div class="wuyong">
            <div class="layui-row">
                <div class="layui-col-md1">
                    <div>&nbsp;</div>
                </div>
                <div class="layui-col-md5">
                    <div class="bingtu_left">
                        <div id="rkdtfb" style="height: 100%;display: flex;justify-content: center;"></div>
                    </div>
                </div>
                <div class="layui-col-md5">
                    <div class="bingtu_left">
                        <div id="sexbl" style="height: 100%;display: flex;justify-content: center;"></div>
                    </div>
                </div>
                <div class="layui-col-md1">
                    <div>&nbsp;</div>
                </div>
            </div>
        </div>  
        <div class="wuyong">
            <div class="layui-row">
                <div class="layui-col-md1">
                    <div>&nbsp;</div>
                </div>
                <div class="layui-col-md5">
                    <div class="bingtu_left">
                        <div id="qu_nlfc" style="height: 100%;display: flex;justify-content: center;"></div>
                    </div>
                </div>
                <div class="layui-col-md5">
                    <div class="bingtu_left">
                        <div id="qu_xlfb" style="height: 100%;display: flex;justify-content: center;"></div>
                    </div>
                </div>
                <div class="layui-col-md1">
                    <!-- <div>&nbsp;</div> -->
                </div>
            </div>
        </div> 
        <div class="wuyong">
            <div class="layui-row">
                <div class="layui-col-md1">
                    <div>&nbsp;</div>
                </div>
                <div class="layui-col-md5">
                    <div class="bingtu_left">
                        <div id="qu_zzmm" style="height: 100%;display: flex;justify-content: center;"></div>
                    </div>
                </div>
                <div class="layui-col-md5">
                    <div class="bingtu_left">
                        <div id="qu_jtrstj" style="height: 100%;display: flex;justify-content: center;"></div>
                    </div>
                </div>
                <div class="layui-col-md1">
                    <!-- <div>&nbsp;</div> -->
                </div>
            </div>
        </div> 
        <div class="liubianxing">
            <div id="leida" style="height: 100%;display: flex;justify-content: center;"></div>
        </div>
    </div> 
</div>
<!-- 点击事件 -->
<script type="text/javascript">
    $('#chagongneng').on('click',function(){
        var modelname = document.getElementById("tt").value;
        if(modelname!=''){
            var dataa={
                modelname:modelname,
            }  
            $.post("__MODULE__/Charts/tiaozhuan",dataa,function(res){  
                var data = JSON.parse(res);
                // console.log(data);
                if(data!=''){
                    aaa = data["url"];
                    //页面跳转
                    window.location.href= '__MODULE__/'+aaa;
                }else{
                    alert("数据库中无对应的链接");
                }
            });
        }
        else{
            alert("请输入查询条件后再进行点击!");
            return false;
        }
    });
</script>
<!-- 折线图 -->
<script type="text/javascript">
    var dom = document.getElementById("zhexian");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title: {
            text: '人口动态分布图',
            subtext: '                      人口数'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018','年份']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} W'
            },
            axisPointer: {
                snap: true
            }
        },
        visualMap: {
            show: false,
            dimension: 0,
            pieces: [{
                lte: 12,
                color: 'red'
            },
            {
                gt: 12,
                lte: 13,
                color: 'green'
            },
            {
                gt: 13,
                lte: 17,
                color: 'red'
            },
            {
                gt: 17,
                color: 'red'
            }]
        },
        series: [{
            name: '人口数',
            type: 'line',
            smooth: true,
            data: [10.8, 13.4, 15.7, 19.6, 22.8, 25.0, 28.6, 30.7, 31.4, 32.7, 33.0, 34.2, 35.4, 34.9, 36, 37.2, 38.8, 39.2, 39.6, 41.5],
        }]
    };;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 人口占比图 -->
<script type="text/javascript">
    var dom = document.getElementById("rkdtfb");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title : {
            text: '人口占比图',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['重点人口','外来人口','流动人口','本地人口']
        },
        series : [
            {
                name: '人口来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:{$data.zdrk}, name:'重点人口'},
                    {value:{$data.wlrk}, name:'外来人口'},
                    {value:{$data.ldrk}, name:'流动人口'},
                    {value:{$data.bdrk}, name:'本地人口'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 性别比例图 -->
<script type="text/javascript">
    // alert({$data.zongrenshu}*{$data.sex_bili} / ({$data.sex_bili}+100));
    var nan_bili = {$data.sex_bili}/({$data.sex_bili}+100);
    var nan = Math.ceil({$data.zongrenshu}*nan_bili);
    var nv = {$data.zongrenshu} - nan;
    var dom = document.getElementById("sexbl");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title : {
            text: '性别比例图',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['男','女']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:nan, name:'男'},
                    {value:nv, name:'女'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 年龄分层图 -->
<script type="text/javascript">
    var dom = document.getElementById("qu_nlfc");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title : {
            text: '年龄分层图',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['0-18岁','18-23岁','23-30岁','30-40岁','40-45岁','45-60岁','60岁以上']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:55222, name:'0-18岁'},
                    {value:55222, name:'18-23岁'},
                    {value:55222, name:'23-30岁'},
                    {value:55222, name:'30-40岁'},
                    {value:55222, name:'40-45岁'},
                    {value:55222, name:'45-60岁'},
                    {value:55222, name:'60岁以上'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 学历分布图 -->
<script type="text/javascript">
    var dom = document.getElementById("qu_xlfb");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title : {
            text: '学历分布图',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['高中以下','中专','高中','大专','本科','硕士','博士']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:94620, name:'高中以下'},
                    {value:10561, name:'中专'},
                    {value:23000, name:'高中'},
                    {value:9430, name:'大专'},
                    {value:82000, name:'本科'},
                    {value:4600, name:'硕士'},
                    {value:320, name:'博士'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 政治面貌图 -->
<script type="text/javascript">
    var dom = document.getElementById("qu_zzmm");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title : {
            text: '政治面貌图',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['群众','无党派人士','共青团员','预备党员','党员']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:53004, name:'群众'},
                    {value:32164, name:'无党派人士'},
                    {value:86921, name:'共青团员'},
                    {value:45623, name:'预备党员'},
                    {value:85336, name:'党员'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 家庭人口统计图 -->
<script type="text/javascript">
    var dom = document.getElementById("qu_jtrstj");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;

    option = {
        title : {
            text: '家庭人数统计',
            subtext: '',
            x:'center'
        },
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['2人', '3人', '4人', '5人', '5人以上'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'户数',
                type:'bar',
                barWidth: '60%',
                data:[660, 6618, 2412, 430, 280]
            }
        ]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 六边形雷达图 -->
<script type="text/javascript">
    var dom = document.getElementById("leida");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title: {
            text: '重点人口占比变化',
            subtext: '',
            top: 10,
            left: 10
        },
        tooltip: {
            trigger: 'item',
            backgroundColor : 'rgba(0,0,250,0.2)'
        },
        legend: {
            type: 'scroll',
            bottom: 10,
            data: (function (){
                var list = [];
                for (var i = 1; i <=18; i++) {
                    list.push(i + 2000 + '');
                }
                return list;
            })()
        },
        visualMap: {
            top: 'middle',
            right: 10,
            color: ['red', 'yellow'],
            calculable: true
        },
        radar: {
           indicator : [
               { text: 'A街道', max: 400},
               { text: 'B街道', max: 400},
               { text: 'C街道', max: 400},
               { text: 'D街道', max: 400},
               { text: 'E街道', max: 400}
            ]
        },
        series : (function (){
            var series = [];
            for (var i = 1; i <= 28; i++) {
                series.push({
                    name:'浏览器（数据纯属虚构）',
                    type: 'radar',
                    symbol: 'none',
                    lineStyle: {
                        width: 1
                    },
                    emphasis: {
                        areaStyle: {
                            color: 'rgba(0,250,0,0.3)'
                        }
                    },
                    data:[
                      {
                        value:[
                            (40 - i) * 10,
                            (38 - i) * 4 + 60,
                            i * 5 + 10,
                            i * 9,
                            i * i /2
                        ],
                        name: i + 2000 + ''
                      }
                    ]
                });
            }
            return series;
        })()
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
